<!DOCTYPE html>
<html>
  <head>
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" charset="utf-8"/>
	<link rel="stylesheet"  href="css/bootstrap.css" ></link>
   	<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.css">
   	<link rel="stylesheet" href="css/style.css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>    
  	<script src="js/model/AppController.js"></script>
    <script src="js/model/Comment.js"></script>
    <script src="js/model/User.js"></script>
    <script src="js/model/Blog.js"></script>
    <script src="js/model/Room.js"></script>    
    <script src="js/model/Map.js"></script>   
    
    <title>Microblogging</title>
  </head>
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/jquery-ui-1.10.3.custom.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/facebook.js"></script>
  <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
<script type="text/javascript" src="js/sync.js"></script>
   <body>
	<script>
	var app=new AppController();
	app.init();
	google.maps.event.addDomListener(window, 'load', initialize);
	$(document).ready(function(){
		$("#buttonI").click(function(){
			$("#panelI").toggle("slide");
		});
		$("#buttonD").click(function(){
		    var options = { direction: 'right' };
		    $('#panelD').toggle('slide', options,700);
		});
		$("#add").click(function(){
			$('#title').val('');
			$('#description').val('');
			listenerMarker(app.currentRoom);			
		});
		$("#myPosition").click(function(){
			setMyPosition();
		});
		$("#suitcase").click(function(){
			$('#myModal').modal('show');
		});
		$("#publish").click(function(){
			app.currentRoom.publishBlog($("#blogId").val());
		});
		$("#addComment").click(function(){
			app.currentRoom.addCommentRoom($('#blogId').val(),$('#comment').val());
			$('#comment').val('');
		});
		$('#myModal').modal('show');
	});
	</script>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		          <h4 class="modal-title">Login</h4>
		        </div>
		        <div class="modal-body">
		          <fb:login-button show-faces="true" width="200" max-rows="1" autologoutlink="true"></fb:login-button>
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
		          <button type="button" class="btn btn-primary">Ingresar</button>
		        </div>
		      </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		  </div><!-- /.modal -->		  
		<div id="fb-root"></div>
		<div id="panelI">
			<button id="add" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-map-marker"></span>
			</button><br/>
			<button id="myPosition" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-screenshot"></span>
			</button><br/>
			<button id="suitcase" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-folder-open"></span>
			</button><br/>
			<button id="search" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-search"></span>
			</button>
		</div>
		<div id="buttonI">
			<button id="bI" type="button" class="btn btn-default">
			  	<span class="glyphicon glyphicon-chevron-right"></span>
			</button>
		</div>
		<div id="buttonD">
			<button id="bD" type="button" class="btn btn-default">
			  	<span class="glyphicon glyphicon-chevron-left"></span>
			</button>
		</div>
		<div id="panelD" class="input-group login">
			<div id="login">
				<fb:login-button show-faces="true" width="200" max-rows="1" autologoutlink="true"></fb:login-button>
			</div>
			<input id="blogId" type="hidden">
		 	<span class="input-group-addon">Título</span>
  			<input id="title" type="text" class="form-control" placeholder="Agregue Título">
  			<span class="input-group-addon">Descripción</span>
  			<textarea id="description" class="form-control" placeholder="Agregue Descripción"></textarea>
  			<span class="input-group-addon">Multimedia</span>
  			<button id="add2" type="button" class="btn btn-default">
		  		<span class="glyphicon glyphicon-plus-sign"></span>
			</button>
			<button id="add2" type="button" class="btn btn-default">
		  		<span class="glyphicon glyphicon-minus-sign"></span>
			</button><br/>
			<button id="publish" class="btn btn-default">Publicar</button>
			<div id="listComments">
				<span class="input-group-addon">Comentarios</span>
				<div id="comments">
				</div>
				<textarea id="comment" class="form-control" placeholder="Agregue Comentario"></textarea>
				<button id="addComment" class="btn btn-default">Agregar</button>
			</div>
		</div>
		<div id="map-canvas"></div>
  </body>
</html>